/* 整体容器，使用 Flex 布局使棋盘和聊天框水平排列 */
.container {
    display: flex;
    justify-content: center;
    gap: 20px; /* 棋盘和聊天框之间的间距 */
    margin-top: 20px;
}

/* 棋盘区域 */
#chess_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 450px;
    height: 490px; 
    gap: 10px;
}

/* 棋盘 canvas */
#chess {
    width: 100%;
    height: 450px;
    background-color: #F9F1D7;
    border: 2px solid #D4B76C;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
}

/* 提示信息在棋盘下方，实现文字居中 */
#screen {
    width: 100%;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 聊天区域，与棋盘等宽等高 */
#chat_area {
    width: 450px;
    height: 490px; 
    background-color: #fff;
    border: 2px solid #D4B76C;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
}

/* 消息显示框，占据除输入区域外的空间 */
#chat_show {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background-color: #fef9f0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 消息气泡 */
#self_msg, #peer_msg {
    padding: 8px 12px;
    border-radius: 15px;
    font-size: 14px;
    max-width: 80%;
    word-wrap: break-word;
}

#self_msg {
    align-self: flex-end;
    background-color: #4CAF50;
    color: #fff;
}

#peer_msg {
    align-self: flex-start;
    background-color: #E0F7FA;
    color: #333;
}

/* 输入区域，确保与提示信息高度一致 */
#msg_show {
    display: flex;
    gap: 10px;
    align-items: center; /* 使输入框和按钮垂直居中 */
}

#chat_input {
    flex: 1;
    height: 40px; /* 与提示信息高度一致 */
    padding: 0 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 20px;
    outline: none;
}

#chat_button {
    width: 80px;
    height: 40px; /* 与提示信息高度一致 */
    border: none;
    border-radius: 20px;
    background-color: #4CAF50;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#chat_button:hover {
    background-color: #45a049;
}

#chat_button:active {
    background-color: #3e8e41;
}

/* 返回大厅按钮 */
#chess_area div:last-child {
    margin-top: 10px;
    padding: 8px 20px;
    background-color: #4CAF50;
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.2s ease;
}

#chess_area div:last-child:hover {
    background-color: #45a049;
}